<template>
  <div class="dialog" v-if="item.name">
    <div style="margin-right: 10px">
      <el-avatar shape="square" :size="30" :src="item?.url" />
    </div>
    <div style="width: 750px">
      <div class="comment" @click="replycomment({ ...item })">
        <div style="font-size: 19px; font-weight: 100%">{{ item.name }}</div>
        <div>{{ item.text }}</div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div>{{ dateFormat(item.createAt) }}</div>
          <div class="praise">
            <span>回复</span
            ><span @click="praiseclick"
              >赞 {{ praise == 0 ? "" : praise }}</span
            >
          </div>
        </div>
      </div>

      <div class="childrencomment">
        <slot name="childrencomment" :children="item.children" />
        <slot
          name="foot"
          :childrenlength="item.children"
          :dispose="dispose"
          :ispack="ispack"
        />
      </div>
    </div>
  </div>
</template>

<script >
import { defineComponent, ref, reactive } from "vue";

import dateFormat from "../../../utils/dateFormat";

export default defineComponent({
  components: {},
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["replyname"],
  setup(props, { emit }) {
    const praise = ref(0);
    //先记录一下用户是否赞了 该回复
    let ispraise = false;
    const praiseclick = () => {
      if (!ispraise) {
        praise.value = praise.value + 1;
        ispraise = !ispraise;
      } else {
        praise.value = praise.value - 1;
        ispraise = !ispraise;
      }
    };
    //处理item.children
    console.log(props.item, "props.item");
    const data = reactive({
      children: {},
    });
    const ispack = ref(true);
    const dispose = (item, isclick = false) => {
      console.log(item);
      console.log(item?.children, "0000000000");
      if (!isclick && item?.children) {
        console.log("展示两列");
        ispack.value = !ispack.value;
        data.children = item.children.slice(0, 2);
      } else {
        console.log("展示三列");
        ispack.value = !ispack.value;
        data.children = item.children;
      }
    };

    //处理回复事件
    const replycomment = (name) => {
      console.log("用户点击了 评论", name);
      emit("replyname", name);
    };

    return {
      praise,
      praiseclick,
      dispose,
      data,
      ispack,
      dateFormat,
      replycomment,
    };
  },
});
</script>

<style scoped lang="less">
.dialog {
  display: flex;
  .praise {
    > span {
      margin-right: 10px;
    }
  }

  .comment:hover {
    background: #f6f6f6;
  }
}

.childrencomment {
  margin-left: 10px;
}
</style>
